import React from 'react'
import './Header.css'
import { useDispatch } from 'react-redux'
// 引入slice中自动创建的actionCreator
import slice from '../../redux/slice'
// 结构slice中actions属性所指向的对象,获取actionCreator
const { addTodo } = slice.actions
export default function Header() {
  const dispatch = useDispatch()
  return (
    <div className="todo-header">
      <input
        type="text"
        onKeyUp={(e) => {
          const value = e.target.value.trim()
          if (!value || e.key !== 'Enter') return
          // 添加任务
          dispatch(addTodo(value))
          // 清空文本框
          e.target.value = ''
        }}
      />
    </div>
  )
}
